<template>
	<div class="login">
		<!-- 头部 -->
		<div class="header">
			<img src="../assets/logo.png" alt="">
			<ul>
				<li>
					解决方案
					<span></span>
				</li>
				<li>
					产品服务
					<span></span>
				</li>
				<li>
					市场洞察
					<span></span>
				</li>
				<li>
					关于我们
					<span></span>
				</li>
				<li>
					艺恩官网
				</li>
				<li>
					电话：4000-052-996
				</li>
			</ul>
		</div>
		<!-- 登录盒子 -->
		<div class="log_div">
			<img src="../assets/left_img.png" alt="">
			<div class="log_verify_div">
				<p>密码登录</p>
				<form action="javascript:;" style="margin-top: 30px;">
					<div class="inp">
						<h2 :class="{'action_bottom':bottom_btn==0}">手机：<input type="tel" v-model="user.utel"
								placeholder="请输入" @focus="bottom_btn=0" @blur="bottom_btn=2"></h2>
						<p :class="{'hid':user.utel.length!=0}">请输入正确的手机号码</p>
					</div>
					<div class="inp">
						<h2 :class="{'action_bottom':bottom_btn==1}">密码：<input type="password" v-model="user.upass"
								placeholder="请输入" @focus="bottom_btn=1" @blur="bottom_btn=2"></h2>
						<p :class="{'hid':user.upass.length!=0}">请输入密码</p>
					</div>
					<button @click="login">登录</button>
				</form>
				<span class="wei">
					<img src="../assets/wx.jpg" alt="">
					微信登录
				</span>
				<p>联系客服</p>
			</div>
		</div>
		<!-- 底部备案 -->
		<p class="bottom">Copyright 2022 艺恩 ENDATA Inc. 北京 All rights reserved. <u>京ICP备10031103号-9.</u>
			<u>京公网安备11010502037000号</u>
		</p>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					utel: "",
					upass: ""
				},
				bottom_btn: 2, //控制下线
			}
		},
		methods: {
			login() {
				if(this.user.utel!=""&&this.user.upass!=""){
					this.$store.dispatch("login", {
						"name": this.user.utel,
						"password": this.user.upass
					})
					setTimeout(()=>{
						this.user.utel="";
						this.user.upass="";
					},500)
				}else{
					alert("内容不可为空！")
				}
			}
		}
	}
</script>

<style scoped>
	.login {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: url("../assets/bg_img.jpg") no-repeat center;
		background-size: 100% 100%;
	}

	/* 头部 */
	.header {
		width: 1120px;
		height: 40px;
		margin: 25px auto 0;
	}

	.header img {
		float: left;
		margin-top: 3px;
	}

	.header ul {
		float: right;
		height: 40px;
	}

	.header ul li {
		position: relative;
		float: left;
		color: #d0ccd6;
		line-height: 40px;
		font-size: 14px;
		padding: 0 20px;
	}

	.header ul li:last-of-type {
		padding-right: 0;
		color: #ffffff;
		font-weight: 500;
	}

	.header ul li span {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		display: block;
		width: 1px;
		height: 10px;
		background-color: #d0ccd6;
	}

	/* 登录盒子 */
	.log_div {
		width: 1120px;
		height: 600px;
		margin: 129px auto 0;
	}

	.log_div img {
		float: left;
	}

	.log_div .log_verify_div {
		float: right;
		width: 360px;
		height: 440px;
		background-color: #fff;
		border-radius: 5px;
		padding: 30px 40px 20px;
	}

	.log_verify_div>p {
		font-size: 18px;
		color: #2e384d;
		text-align: center;
	}

	.log_verify_div .inp h2 {
		font-size: 16px;
		color: #606266;
		line-height: 40px;
		font-weight: 400;
		border-bottom: 1px solid #e8e8e8;
	}

	.log_verify_div .inp .action_bottom {
		border-bottom: 1px solid #7030a0;
	}

	.log_verify_div .inp h2 input {
		border: 0;
		outline: none;

	}

	input::-webkit-input-placeholder {
		color: #cacdd4;
	}

	.log_verify_div .inp p {
		font-size: 12px;
		color: #f56c6c;
		padding-top: 2px;
	}

	.log_verify_div .inp .hid {
		/* 隐藏p */
		opacity: 0;
	}

	.log_verify_div button {
		width: 240px;
		height: 38px;
		border: 0;
		color: #fff;
		background-color: #7030a0;
		margin-top: 23px;
		margin-left: 20px;
		font-size: 14px;
	}

	.log_verify_div button:hover {
		background-color: #8d59b3;
		cursor: pointer;
	}

	.log_verify_div .wei {
		display: inline-block;
		margin-top: 110px;
		margin-left: 6px;
		font-size: 13px;
		line-height: 32px;
		color: #7030a0;
	}

	.log_verify_div .wei img {
		vertical-align: middle;
		margin-right: 4px;
	}

	.log_verify_div>p:last-of-type {
		font-size: 12px;
		text-align: right;
		padding-right: 10px;
	}

	/* 底部 */
	.bottom {
		position: absolute;
		left: 0;
		bottom: 20px;
		width: 100vw;
		text-align: center;
		font-size: 12px;
		color: #999999;
		word-spacing: 2px;
	}
</style>
